<template>
 <div style="margin-left: 5px;">
   <el-card >
    <template slot="header">
      <div>
		 <h3 style="display:inline-block">{{Data.CodeNum}}.</h3> 	<span v-html="Data.Title" ></span>
      <el-button   @click="divvisibility" type="text"  v-if="!preview">{{see}}</el-button>
      </div>
		</template>
    <div v-if="visible">
      <el-tabs @tab-click="cheackSubItem()" > 
        <el-tab-pane  v-for="Option in this.Data.Options" :key="Option.itemName" :name="Option.itemId" :label="Option.itemName" >
          <el-radio v-model="Data.CheckValue" v-for="Opt in Option.SubItems" :label="Opt.itemName" :key="Opt.itemName" @change="getitem" >
          </el-radio>
        </el-tab-pane>
      </el-tabs>
    </div>
   </el-card> 
   

   <el-card class="box-card" style="margin-top:20px"  v-if='canEdit==true' >
     <EditorComponent v-on:GetHtml="GetHtml" :Html="Data.Title"/>
      <el-collapse >
            <el-collapse-item v-for="opt in this.Data.Options" :key="opt.itemName"  :name="opt.itemId"> 
                <template slot="title">
                  <table>
                    <tr>
                        <td>
                             <div id='title-row' >
                                <el-input size="small"  @focus.stop="handleClick()" @input="inputchange" @click.stop="handleClick()" v-model="opt.itemName" placeholder="请输入内容"  ></el-input>
                             </div>
                        </td>
                        <td>
                               <div style='display: inline-block;margin-top: 5px;'>
                                        <el-button type="warning" @click.stop="remove(opt.itemId)" size="mini" style='display: inline-block;' icon="el-icon-minus" circle></el-button>
                                        <el-button type="danger"  @click.stop="insert(opt.itemId)" size="mini" style='display: inline-block;'  icon="el-icon-plus" circle></el-button>
                                        <el-button  size="mini" style='display: inline-block;' @click.stop='moveUp(opt.itemId)' icon="el-icon-top" circle></el-button>
                                        <el-button  size="mini" style='display: inline-block;' @click.stop='moveDown(opt.itemId)' icon="el-icon-bottom" circle></el-button>
                                </div>
                        </td>
                        <td>
                        </td>
                    </tr>
                </table>
                </template>
                <div>
                <el-button size="mini" style="float:right"  icon="el-icon-plus" @click="addSubItem(opt.itemId)" type="primary">添加子选项</el-button>
                <el-table :fit="true" :data="opt.SubItems"  style="width: 100%">
                  <el-table-column label="选项文字" >
                    <template slot-scope="scope">
                        <div id='title-row' >
                            <el-input size="small" style='display: inline-block;' v-model="scope.row.itemName" placeholder="请输入内容" ></el-input>
                        </div>
                        </template>
                  </el-table-column>

                  <el-table-column  label="操作"  >
                            <template slot-scope="scope">
                                    <div style='display: inline-block;margin-top: 5px;'>
                                        <el-button type="primary" @click="removeSubItem(opt.itemId, scope.row.itemId)" size="mini" style='display: inline-block;' icon="el-icon-minus" circle></el-button>
                                        <el-button type="primary"   @click.stop="insertSubItem(opt.itemId, scope.row.itemId)" size="mini" style='display: inline-block;'  icon="el-icon-plus" circle></el-button>
                                    </div>
                            </template>
                    </el-table-column>


                </el-table>
                </div>
            </el-collapse-item>

        </el-collapse> 
        <BatchAddComponent v-model="msg"  @getitem="itemNameArry" :itemnamearry="itemname"></BatchAddComponent>
        <el-button type="warning " style='margin-top:5px;width:100%' @click="canEdit=!canEdit" >完成编辑</el-button>
   </el-card>
   
 </div>
</template>

<script lang="ts">
import Vue from 'vue';
import TBaseQuestion from './ts/TBaseQuestion';
import SizeCodeOption,{SizeCodeSubject} from './ts/SizeCodeOption'
import EditorComponent from './EditorComponent.vue'
import Component from 'vue-class-component';
import BatchAddComponent from './BatchAddComponent.vue';
import { Watch } from 'vue-property-decorator';
import {QuestionTypes}from'./ts/QuestionDataTypes';


@Component({
  components:{EditorComponent,BatchAddComponent}
})
  
export  default class SizeCodeComponenet extends TBaseQuestion<SizeCodeOption,SizeCodeSubject>{
$name:string= 'SizeCodeComponent';

title="标题";
see="显示";
visible=false;
itemname="";

msg="";
msgarray:string[]=[];

constructor(){
    super(SizeCodeOption,SizeCodeSubject);
    this.Data.QuestionType=QuestionTypes.qtBigSmallCode;
    this.Data.Title="设置题目标题" ;
    
    for(let i:number=0;i<5;++i)
          {
            let opt = new SizeCodeOption();
            opt.itemId=i.toString();
            opt.itemName='选项'+i;
            this.Data.Options.push(opt);
      }
    
}
 mounted()
    {
      	super.mounted();
         this.initProps();
         console.info("component mounted!");
    }

get Check():string{
        return  "S";
     }

itemNameArry(){
  this.itemname=this.getOptionText();
}
//显示题目内容div
divvisibility(){
  this.visible=!this.visible;
  if(this.see==="显示"){
     this.see="隐藏";
  }else{
    this.see="显示";
  }
}

@Watch('msg')
	    getstr(){
				console.log(this.msg)
				this.Data.Options=[];
		  	this.msgarray=this.msg.split('\n')
			  this.msgarray.forEach(element => {
			  if(element!==" "){
			    var opt =new SizeCodeOption();
			    opt.itemName=element;
			    this.Data.Options.push(opt);
			  }
				});
				
	
	   }
	   
	   //获取options中每一项的name
	   getOptionText():string{
			let options="";
			let n=this.Data.Options.length;
			for(let i=0;i<n;i++){
				if(i<(n-1)){
					options+=this.Data.Options[i].itemName+"\n";
				}else{
           options+=this.Data.Options[i].itemName;
				}
			}
			return options;
			
		}
//输入框内容改变
	   inputchange(){
		   this.msg=this.getOptionText();
	   }
GetHtml(html:string):void
     {
        this.Data.Title=html;
        this.title=html;
     }

setQuestionData(data:string):void{

}
getQuestionData():any{
    return this.Data;
}
insert(id:string){
  let options= this.Data.Options;
  options.splice(options.findIndex(item=>item.itemId===id)+1,0,this.createNewOption(SizeCodeOption));
  this.msg=this.getOptionText(); 
}
remove(id:string){
  super.remove(id);
  this.msg=this.getOptionText();
}
handleClick():void
    {
        //alert('clicked');
        console.info('');
    }
moveUp(id:string){
  super.moveUp(id)
  this.msg=this.getOptionText();
}
/**
 * 
 * 子项操作
 */

addSubItem(subId:string){
      let options= this.Data.Options;
      let opt=options[options.findIndex(item=>item.itemId===subId)];
      let subItem=this.createNewOption(SizeCodeOption);
      subItem.itemName="子选项"+(opt.SubItems.length+1);
      opt.SubItems.push(subItem);
}
removeSubItem(parentId:string ,subItemId:string){
    let options= this.Data.Options;
    let subItems=options[options.findIndex(item=>item.itemId===parentId)].SubItems;
    subItems.splice(options.findIndex(item => item.itemId ===subItemId), 1);
}
insertSubItem(parentId:string ,subItemId:string){
    let options= this.Data.Options;
    let subItems=options[options.findIndex(item=>item.itemId===parentId)].SubItems;
    let subItem=this.createNewOption(SizeCodeOption);
    subItem.itemName="子选项"+(options.length+1);
    subItems.splice(options.findIndex(item=>item.itemId===subItemId)+1,0,subItem);
}
/**
 * 判断是否有子项
 */
cheackSubItem(){
   let opt=this.Data.Options;
   opt.forEach(o => {
     let n= o.SubItems.length;
     if(n===0){
      let option=this.createNewOption(SizeCodeOption);
      option.itemName=o.itemName;
      o.SubItems.push(option);
     }
   });
 }

}


</script>
<style>

.tui table tr td {
  border: 1px solid #ccc;
}
.tui table tr th {
  border: 1px solid #ccc;
}


</style>
